<template>
	<div class="regionPrice">
		<el-form :inline="true" class="br">
			<el-row>
				<el-form-item label="开始时间">
					<el-date-picker v-model="startTime" type="datetime" placeholder="选择开始时间" :picker-options="dateOptions"></el-date-picker>
				</el-form-item>

				<el-form-item label="结束时间" label-width="120px">
					<el-date-picker v-model="endTime" type="datetime" placeholder="选择结束时间" :picker-options="endDateOptions"></el-date-picker>
				</el-form-item>
			</el-row>

			<el-row>
				<el-form-item label="调价类型">
					<div class="w193">
						<el-radio class="radio" v-model="priceType" label="PERCENTAGE">百分比</el-radio>
						<el-radio class="radio" v-model="priceType" label="PRICE">金额</el-radio>
					</div>
				</el-form-item>

				<el-form-item label="价格" label-width="120px">
					<el-input v-model="changePrice" placeholder="请输入价格" class="inline-input w217"></el-input>
				</el-form-item>
			</el-row>

			<el-row>
				<el-form-item label="调价区域"></el-form-item>
			</el-row>

			<el-row>
				<el-form-item :label="cityName">
					<el-select v-model="county" filterable placeholder="请选择" @change="areaSelected">
						<el-option v-for="(item, $index) in countyList" :key="item.pinyin" :label="item.name" :value="item"></el-option>
					</el-select>

					<el-button type="primary" @click.native="regionAdd">添加调价区域</el-button>
				</el-form-item>
			</el-row>

			<el-row>
				<el-form-item class="w800 text-right">
					<el-button type="primary" icon="plus" @click.native="regionPriceAdd">添加</el-button>
				</el-form-item>
			</el-row>
		</el-form>

		<!--<el-table :data="regionPriceData" stripe border fit style="width: 100%;">
			<el-table-column prop="startTime" label="开始时间">
				<template scope="scope">
					<span>{{api.dateFormat(scope.row.startTime,"yyyy-MM-dd")}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="endTime" label="结束时间">
				<template scope="scope">
					<span>{{api.dateFormat(scope.row.endTime,"yyyy-MM-dd")}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="areaName" label="调价区域"></el-table-column>
			<el-table-column prop="adjust" label="价格"></el-table-column>
			<el-table-column label="排序" prop="priority">
				<template scope="scope">
					<span>{{scope.row.priority}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="240">
				<template scope="scope">
					<el-button type="primary" icon="edit" @click.native="update(scope.row)">修改</el-button>
					<el-button type="danger" icon="delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>-->
		<div class="el-table el-table--striped el-table--border">
			<table width="100%" cellspacing="0" cellpadding="0" border="0" class="el-table__body" id="table">
				<thead>
					<tr>
						<th class="is-leaf">
							<div class="cell">
								开始时间
							</div>
						</th>
						<th>
							<div class="cell">
								结束时间
							</div>
						</th>
						<th>
							<div class="cell">
								调价区域
							</div>
						</th>
						<th>
							<div class="cell">
								价格
							</div>
						</th>
						<th>
							<div class="cell">
								操作
							</div>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in regionPriceData" :id="item.id">
						<td>
							<div class="cell">
								<span>{{api.dateFormat(item.startTime,"yyyy-MM-dd")}}</span>
							</div>
						</td>
						<td>
							<div class="cell">
								<span>{{api.dateFormat(item.endTime,"yyyy-MM-dd")}}</span>
							</div>
						</td>
						<td>
							<div class="cell">
								<span>{{item.areaName}}</span>
							</div>
						</td>
						<td>
							<div class="cell">
								<span>{{item.adjust}}{{item.ruleType == "PERCENTAGE" ? "%" : ""}}</span>
							</div>
						</td>
						<td>
							<div class="cell">
								<el-button type="primary" icon="edit" @click.native="update(index)" size="small">修改</el-button>
								<el-button type="danger" icon="delete" @click.native="deletePriceArea(index)" size="small">删除</el-button>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<el-dialog v-model="isEdit" :close-on-click-modal="false">
			<el-form :model="priceInfo" label-width="80px" ref="priceInfo" :row-key="1">
				<el-form-item label="开始时间" prop="startTime">
					<el-date-picker v-model="priceInfo.startTime" type="datetime" placeholder="选择开始时间" :picker-options="updateOptions"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker v-model="priceInfo.endTime" type="datetime" placeholder="选择结束时间" :picker-options="updateendOptions"></el-date-picker>
				</el-form-item>
				<el-form-item label="调价类型" prop="points">
					<el-radio class="radio" v-model="priceInfo.ruleType" label="PERCENTAGE">百分比</el-radio>
					<el-radio class="radio" v-model="priceInfo.ruleType" label="PRICE">金额</el-radio>
				</el-form-item>
				<el-form-item label="价格" prop="adjust">
					<el-input v-model="priceInfo.adjust" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="调价区域" prop="areaName">
					<!--<baiduMap :cityName="cityName" :regionInfo="regionInfo" :isEdit="isEdit" @message="getPoints"></baiduMap>-->
					<el-select v-model="county2" filterable placeholder="请选择" @change="areaSelected">
						<el-option v-for="(item, $index) in countyList" :key="item.pinyin" :label="item.name" :value="item"></el-option>
					</el-select>
					<el-button type="primary" @click.native="regionAdd">添加调价区域</el-button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="close">取 消</el-button>
				<el-button type="primary" @click.native="submit" :loading="loading">提 交</el-button>
			</div>
		</el-dialog>

		<el-dialog v-model="isMapAdd" :close-on-click-modal="false">
			<el-form :model="areaInfo" label-width="120px" ref="areaInfo">
				<el-form-item label="区域名称" prop="areaName" :rules="[{required: true,message: '区域名称不能为空'}]">
					<el-input v-model="areaInfo.areaName" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="区域简拼" prop="pinyin" :rules="[{required: true,message: '区域简拼不能为空'}]">
					<el-input v-model="areaInfo.pinyin" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="区域管理">
					<baiduMap :cityName="cityName" :regionInfo="areaInfo" :isEdit="isMapAdd" @message="getPoints"></baiduMap>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="close">取 消</el-button>
				<el-button type="primary" @click.native="areaAddSubmit('areaInfo')" :loading="loading">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			isUpdate: Boolean
		},
		data() {
			return {
				// 调价区
				areaPinyin: "",
				cityName: "",
				areaId: "",
				areaName: "",
				startTime: "",
				endTime: "",
				priceType: "PRICE",
				changePrice: "",
				county: "",
				county2: "",
				countyList: [],
				regionPriceData: [],
				isEdit: false,
				loading: false,
				priceInfo: {
					startTime: "",
					endTime: "",
					name: "",
					points: "PRICE",
					adjust: ""
				},
				points: [],

				isMapAdd: false,
				areaInfo: {
					areaName: "",
					pinyin: "",
					coordinates: "[]"
				},

				dragManager: {
					clientY: 0,
					dragObj: ""
				}
			}
		},
		computed: {
			dateOptions: function() {
				return {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				}
			},
			endDateOptions: function() {
				var _this = this;
				return {
					disabledDate(time) {
						return time.getTime() < new Date(_this.startTime).getTime() - 8.64e7;
					}
				}
			},
			updateOptions: function(){
				var _this = this;
				return {
					disabledDate(time) {
						return time.getTime() < new Date(_this.priceInfo.startTime).getTime() - 8.64e7;
					}
				}
			},
			updateendOptions: function(){
				var _this = this;
				return {
					disabledDate(time) {
						return time.getTime() < new Date(_this.priceInfo.endTime).getTime() - 8.64e7;
					}
				}
			}
		},
		components: {
			baiduMap: require("../sub/baiduMap.vue")
		},
		methods: {
			// 调价区域
			regionPriceAdd() {
				// 添加调价区域
				var _this = this;

				if(_this.startTime == "") {
					_this.$message({
						message: "请选择开始时间",
						type: "error"
					});
					return false;
				}
				if(_this.endTime == "") {
					_this.$message({
						message: "请选择结束时间",
						type: "error"
					});
					return false;
				}
				if(_this.changePrice == "") {
					_this.$message({
						message: "请输入调价价格",
						type: "error"
					});
					return false;
				}

				var data = JSON.stringify({
					cityId: _this.cityId,
					areaId: _this.areaId,
					pinyin: _this.areaPinyin,
					startTime: new Date(_this.startTime).getTime(),
					endTime: new Date(_this.endTime).getTime(),
					ruleType: _this.priceType,
					adjust: _this.changePrice
				});

				this.$http.post("/addCityPriceArea.shtml", "add=" + data).then(result => {
					if(result.code == 200) {
						_this.$notify({
							title: '成功',
							message: "修改成功",
							type: 'success'
						});
						_this.getListCityArea();

						_this.startTime = "";
						_this.endTime = "";
						_this.changePrice = "";
						_this.county = "";
					}
				}).catch(error => {
					console.log(error);
				})
			},
			regionAdd() {
				this.isMapAdd = true;
				
				this.areaInfo.areaName = "";
				this.areaInfo.pinyin = "";
			},
			close() {
				this.isEdit = false;
				this.isMapAdd = false;
			},
			submit() {
				var _this = this;

				var data = "param=" + JSON.stringify(this.priceInfo);
				this.$http.post("updateCityPrice.shtml", data).then(result => {
					if(result.code == 200) {
						_this.$notify({
							title: '成功',
							message: "修改成功",
							type: 'success'
						});
						_this.getListCityArea();
					}
					_this.isEdit = false;
				})
			},
			getListCityArea() {
				// 同城调价区域列表
				var _this = this;

				this.$http.get("/listCityArea.shtml", {
					params: {
						cityId: _this.cityId
					}
				}).then(result => {
					if(result.code == 200) {
						_this.regionPriceData = result.data;
					}
				}).catch(error => {
					console.log(error);
				})
			},
			getListArea() {
				// 同城区域列表
				var _this = this;
				this.$http.get("/cityPriceAdjustList2.shtml", {
					params: {
						cityId: _this.cityId
					}
				}).then(result => {
					if(result.code == 200) {
						_this.countyList = result.data;
						_this.$emit('message', false);
					}
				}).catch(error => {
					console.log(error);
				})
			},
			areaSelected(idx) {
				this.areaPinyin = idx.pinyin;
				this.areaId = idx.id;
				this.priceInfo.areaId = idx.id;
			},
			getPoints(points) {
				this.points = points;
			},
			// 点击修改
			update(idx) {
				var row = this.regionPriceData[idx];
				this.isEdit = true;

				this.getCityPriceInfo(row);
				this.county2 = row.areaName;
			},
			// 点击删除
			deletePriceArea(idx) {
				var row = this.regionPriceData[idx];
				var _this = this;
				this.$confirm('确认删除该条数据?', '提示', {
					type: 'warning'
				}).then(() => {
					_this.loading = true;

					_this.$http.post("/cityPriceAreaDel.shtml", "param=" + JSON.stringify({
						cityId: _this.cityId,
						id: row.id
					})).then(result => {
						if(result.code == 200) {
							_this.$notify({
								title: '成功',
								message: '删除成功',
								type: 'success'
							});
							_this.getListCityArea();
						}
						_this.loading = false;
					}).catch((error) => {
						console.log(error);
					});
				}).catch(() => {

				});
			},
			getCityPriceInfo(row) {
				var _this = this;
				this.$http.get("getCityPriceInfo.shtml", {
					params: {
						cityId: _this.cityId,
						id: row.id
					}
				}).then(result => {
					if(result.code == 200) {
						_this.priceInfo = result.data;
					}
				})
			},
			areaAddSubmit(formName) {
				var _this = this;
				this.$refs[formName].validate((valid) => {
					if(valid) {
						var data = "param=" + JSON.stringify({
							cityId: _this.cityId,
							name: _this.areaInfo.areaName,
							pinyin: _this.areaInfo.pinyin,
							points: _this.points
						});
						this.$http.post("/addPriceAdjustArea.shtml", data).then(result => {
							if(result.code == 200) {
								_this.$notify({
									title: '成功',
									message: '添加成功',
									type: 'success'
								});
							}
							_this.isMapAdd = false;
							_this.getListArea();
						}).catch((error) => {
							console.log(error);
						});
					} else {
						return false;
					}
				});
			},
			priority(arr) {
				var _this = this;
				//同城调价优先级调整
				var data = "param=" + JSON.stringify({
					param: arr.join(","),
					cityId: _this.cityId
				});
				this.$http.post("cityPricePriority.shtml", data).then(result => {
					if(result.code == 200) {
						_this.$notify({
							title: '成功',
							message: '修改成功',
							type: 'success'
						});
					}
				});
			}
		},
		created() {
			var _this = this;
			this.cityInfo = JSON.parse(sessionStorage.getItem("cityDetail"));
			sessionStorage.getItem("tabIdx") ? this.cityDetail = sessionStorage.getItem("tabIdx") : "";

			this.cityName = this.cityInfo.name;
			this.cityId = this.cityInfo.id;
			this.radio = this.cityInfo.status == "VALID" ? true : false;

			this.getListCityArea();
			this.getListArea();

			setTimeout(() => {
				$("#table tbody").sortable({
					cursor: "move",
					items: "tr", //只是tr可以拖动
					opacity: 0.6, //拖动时，透明度为0.6
					revert: true, //释放时，增加动画
					update: function(event, ui) { //更新排序之后
						var categoryids = $(this).sortable("toArray");
						_this.priority(categoryids);
					}
				});
			}, 1000);
		},
		watch: {
			"isUpdate": function(val){
				var _this = this;
				if(val){
					this.getListArea();
				}
			}
		}
	}
</script>

<style>

</style>